<template>
  <div class="vue-reactivity-guide">
    <header class="guide-header">
      <h1>✨ Vue 3 响应式魔法指南 ✨</h1>
      <p>探索 Vue 3 组合式 API 的强大响应式系统</p>
    </header>
    
    <nav class="guide-nav">
      <div 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['nav-item', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        {{ tab.icon }} {{ tab.title }}
      </div>
    </nav>
    
    <main class="guide-content">
      <div v-if="activeTab === 'intro'" class="intro-section">
        <div class="intro-card">
          <h2>欢迎来到 Vue 3 响应式世界！</h2>
          <p>Vue 3 的响应式系统是框架的核心特性，它让数据变化能够自动反映到视图上，无需手动操作 DOM。</p>
          
          <div class="magic-preview">
            <div class="magic-text" :style="{ color: magicColor }">
              👆 点击上方导航，开始你的响应式魔法之旅！
            </div>
          </div>
          
          <div class="concept-overview">
            <h3>核心响应式 API</h3>
            <div class="concept-cards">
              <div class="concept-card" @click="activeTab = 'ref'">
                <div class="card-icon">🔮</div>
                <h4>ref()</h4>
                <p>创建基本类型和对象的响应式引用</p>
              </div>
              <div class="concept-card" @click="activeTab = 'reactive'">
                <div class="card-icon">🏗️</div>
                <h4>reactive()</h4>
                <p>创建响应式代理对象</p>
              </div>
              <div class="concept-card" @click="activeTab = 'computed'">
                <div class="card-icon">🧮</div>
                <h4>computed()</h4>
                <p>创建缓存的计算属性</p>
              </div>
              <div class="concept-card" @click="activeTab = 'watch'">
                <div class="card-icon">👀</div>
                <h4>watch()</h4>
                <p>监听数据变化并执行副作用</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <RefExample v-show="activeTab === 'ref'" />
      <ReactiveExample v-show="activeTab === 'reactive'" />
      <ComputedExample v-show="activeTab === 'computed'" />
      <WatchExample v-show="activeTab === 'watch'" />
    </main>
    
    <footer class="guide-footer">
      <p>💡 提示：每个示例都包含了完整的代码和说明，你可以通过切换不同的标签页来学习各个响应式 API 的使用方法。</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import RefExample from './RefExample.vue';
import ReactiveExample from './ReactiveExample.vue';
import ComputedExample from './ComputedExample.vue';
import WatchExample from './WatchExample.vue';

// 标签数据
interface Tab {
  id: string;
  title: string;
  icon: string;
}

const tabs: Tab[] = [
  { id: 'intro', title: '介绍', icon: '📖' },
  { id: 'ref', title: 'ref()', icon: '🔮' },
  { id: 'reactive', title: 'reactive()', icon: '🏗️' },
  { id: 'computed', title: 'computed()', icon: '🧮' },
  { id: 'watch', title: 'watch()', icon: '👀' }
];

// 当前激活的标签
const activeTab = ref<string>('intro');

// 魔法颜色效果
const colors = ['#ff6b6b', '#48dbfb', '#1dd1a1', '#feca57', '#ff9ff3', '#54a0ff'];
const magicColor = ref<string>(colors[0]);
let colorInterval: number | null = null;

// 切换颜色的函数
const changeMagicColor = () => {
  const currentIndex = colors.indexOf(magicColor.value);
  const nextIndex = (currentIndex + 1) % colors.length;
  magicColor.value = colors[nextIndex];
};

// 生命周期钩子
onMounted(() => {
  // 启动颜色轮播
  colorInterval = window.setInterval(changeMagicColor, 2000);
});

onUnmounted(() => {
  // 清理定时器
  if (colorInterval) {
    clearInterval(colorInterval);
  }
});
</script>

<style scoped>
.vue-reactivity-guide {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.guide-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.guide-header h1 {
  margin: 0;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.guide-header p {
  margin: 10px 0 0;
  font-size: 1.2rem;
  opacity: 0.9;
}

.guide-nav {
  background-color: white;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  flex-wrap: wrap;
}

.nav-item {
  padding: 12px 24px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  background-color: #f8f9fa;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item:hover {
  background-color: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #764ba2;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.guide-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.intro-section {
  background-color: white;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.intro-card h2 {
  color: #333;
  margin-top: 0;
  font-size: 2.2rem;
  text-align: center;
}

.intro-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 30px;
}

.magic-preview {
  margin: 40px 0;
  padding: 30px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.magic-text {
  font-size: 1.5rem;
  font-weight: bold;
  transition: color 1s ease;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.concept-overview h3 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
  font-size: 1.8rem;
}

.concept-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.concept-card {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.concept-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  border-color: #667eea;
  background-color: white;
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.concept-card h4 {
  margin: 0 0 10px;
  color: #667eea;
  font-size: 1.3rem;
}

.concept-card p {
  color: #666;
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
}

.guide-footer {
  background-color: #2c3e50;
  color: white;
  padding: 30px;
  text-align: center;
  margin-top: 60px;
}

.guide-footer p {
  margin: 0;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .guide-header h1 {
    font-size: 2rem;
  }
  
  .guide-nav {
    flex-direction: column;
    align-items: center;
  }
  
  .nav-item {
    width: 100%;
    max-width: 300px;
    text-align: center;
    justify-content: center;
  }
  
  .intro-section {
    padding: 20px;
  }
  
  .concept-cards {
    grid-template-columns: 1fr;
  }
}
</style>